Page d'Accueil Simple, Grise et Epurée
Bonjour !
Voici une page d'accueil pour compléter le thème "Simple, Gris et Epuré".
Voici une page d'accueil pour compléter le thème "Simple, Gris et Epuré".
Cliquez ici
Parce qu'il s'agit d'un travail regroupant plusieurs éléments, vous pouvez aller voir la Fiche de Présentation, ainsi que la Fiche de Liens que j'ai codées dans le même genre.
N'hésitez pas non plus à jeter un oeil à l'excellent travail d'Halloween qui a répondu à l'une de mes demandes et a confectionné un superbe QEEL qui s'inscrit dans le même design.
N'hésitez pas non plus à jeter un oeil à l'excellent travail d'Halloween qui a répondu à l'une de mes demandes et a confectionné un superbe QEEL qui s'inscrit dans le même design.
L'installation de cette PA vous demandera de copier un code dans la page consacrée à la PA dans le panneau d'administration de votre forum, mais de toucher également au CSS du forum.
De plus, Si vous avez déjà installé dans le CSS de votre forum les éléments proposés dans la fiche de présentation ou dans la fiche de lien, certains éléments sont susceptibles de se répéter ! Veillez donc bien à repérer uniquement les éléments que vous n'avez pas déjà installés afin de vous épargner du temps et de garder une fiche de CSS claire et lisible.
De plus, Si vous avez déjà installé dans le CSS de votre forum les éléments proposés dans la fiche de présentation ou dans la fiche de lien, certains éléments sont susceptibles de se répéter ! Veillez donc bien à repérer uniquement les éléments que vous n'avez pas déjà installés afin de vous épargner du temps et de garder une fiche de CSS claire et lisible.
J'ai fait le choix de vous proposer cette PA sans hide, mais un petit mot gentil ou une critique constructive seront très appréciés ! N'hésitez surtout pas à donner votre avis et à critiquer cette proposition ! J'aimerais recevoir des commentaires constructifs pour m'aider à m'améliorer, alors un grand merci à ceux qui prendront le temps de le faire
! Merci également de ne pas retirer les crédits.Code de la PA à insérer directement dans la partie dédiée dans le panneau d'administration :
- Code:
<div style="width: 790px; background-color: #E4E4E4;">
<div style="border-top: 2px solid #B0C3AB;" class="fond_entete">
<div style="margin-top: -3px; text-align: center;" class="bloc_guillemet">
<strong>“</strong><span style="color: #1C3734; font-variant: small-caps; letter-spacing: 2px">Votre Titre qui Claque !</span>
</div>
</div>
<table style="margin-top: 40px;">
<tbody>
<tr>
<td>
<div style="margin: 0 0 -28px 50px;" class="titre_1">
Contexte
</div><br />
<div class="fond_2">
<br />
<div style="margin: -3px 20px 0 20px;" class="style_2">
</div>
<div style="margin: 0px 20px 0 20px; width: 240px;" class="style_1">
</div>
<br />
<div style="width: 215px; height: 322px; margin: 0 20px 0 20px; text-align: justify;" class="fond_3">
<span style="font-family: calibri; font-size: 11px;"></span>
<div style="text-align: center; font-family: calibri; font-size: 11px;">
Phrase d'accroche de votre contexte
</div><span style="font-family: calibri; font-size: 11px;"><br />Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare."<br /></span>
<div style="font-family: calibri; font-size: 11px; text-align: center;">
Petite phrase de fin interrogative qui tue ?
</div><span style="font-family: calibri; font-size: 11px;"><br /><a style="font-size: 11px ;" href="lien vers le sujet" class="bloc_more">more...</a><br /></span>
</div>
</div>
</td>
<td>
<div style="margin: 0 0 -28px 40px;" class="titre_1">
Nouvelles
</div><br />
<div style="margin: 0;" class="fond_2">
<br />
<div style="margin: -3px 20px 0 20px;" class="style_2">
</div>
<div style="margin: 0px 20px 0 20px; width: 200px;" class="style_1">
</div><br />
<div style="width: 175px; height: 80px; margin: 0 20px 0 20px;" class="fond_3 news">
<div class="news_img">
</div>
<div class="news_bloc">
<div style="padding: 13px 10px 10px 10px;">
<span class="date">24.11</span> <span class="objet">• Construction •</span><br /><span style="font-family: calibri; font-size: 11px;">Installation des images du forum, proposition de bannière, correction de la barre de navigation, correction du QEEL</span><br /><br /><br /> <span class="date">23.11</span> <span class="objet">• Construction •</span><br /><span style="font-family: calibri; font-size: 11px;"> Ajout des descriptions des trois premières catégories du forum et suggestions des nomenclatures</span><br /><br /><br /> <span class="date">01.11</span> <span class="objet">• Codage •</span><br /><span style="font-family: calibri; font-size: 11px;"> Optimisation des catégories et suggestions de titres.</span><br /><br /><br />
</div>
</div>
</div>
</div><br />
<div style="margin: 15px 0 -28px 40px;" class="titre_1">
Navigation
</div><br />
<div style="margin: 0;" class="fond_2">
<br />
<div style="margin: -3px 20px 0 20px;" class="style_2"></div>
<div style="margin: 0px 20px 0 20px; width: 200px;" class="style_1"></div>
<br />
<div class="fond_6">
<div style="line-height: 14px;">
<a href="lien vers le sujet" class="bloc_lien">Règlement</a><br /><br /><a href="lien vers le sujet" class="bloc_lien">Contexte</a><br /><br /><a href="lien vers le sujet" class="bloc_lien">Groupes</a><br /><br /><a href="lien vers le sujet" class="bloc_lien">Présentations</a><br /><br /><a href="lien vers le sujet" class="bloc_lien">Partenariats</a>
</div>
</div>
</div>
</td>
<td>
<div style="margin: 0 0 -28px 50px;" class="titre_1">
Staff
</div><br />
<div class="fond_2" style="width: 215px;">
<br />
<div class="style_2" style="margin: -3px 20px 0 20px; width: 175px;"></div>
<div class="style_1" style="margin: 0px 20px 0 20px; width: 175px;"></div>
<br />
<div style="padding: 0 10px 0 10px;">
<div class="staff">
<img class="img_80" src="http://nsa33.casimages.com/img/2014/11/14/141114085108209490.png" />
<div class="bulle_staff">
<div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 76px; height: 76px; text-align: center;">
<br /><span style="font-size: 11px;" class="objet">Hugo Johnson</span><br /><span style="font-size: 12px;" class="date">Admin</span>
</div>
</div>
</div>
<div class="staff">
<img class="img_80" src="http://nsa33.casimages.com/img/2014/11/14/141114085108209490.png" />
<div class="bulle_staff">
<div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 76px; height: 76px; text-align: center;">
<br /><span style="font-size: 11px;" class="objet">Nom</span><br /><span style="font-size: 12px;" class="date">Rang</span>
</div>
</div>
</div>
<div></div>
<div class="staff" style="margin-top: 10px;">
<img class="img_80" src="http://nsa33.casimages.com/img/2014/11/14/141114085108209490.png" />
<div class="bulle_staff">
<div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 76px; height: 76px; text-align: center;">
<br /><span style="font-size: 11px;" class="objet">Nom</span><br /><span style="font-size: 12px;" class="date">Rang</span>
</div>
</div>
</div>
<div class="staff" style="margin-top: 10px;">
<img class="img_80" src="http://nsa33.casimages.com/img/2014/11/14/141114085108209490.png" />
<div class="bulle_staff">
<div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 76px; height: 76px; text-align: center;">
<br /><span style="font-size: 11px;" class="objet">Nom</span><br /><span style="font-size: 12px;" class="date">Rang</span>
</div>
</div>
</div>
</div>
</div><br />
<div style="margin: 0 0 -28px 50px;" class="titre_1">
Prédéfinis
</div><br />
<div style="padding: 0 20px 20px 20px; width: 175px;" class="fond_2">
<br />
<div class="style_2" style="margin: -3px 20px 0 0px; width: 175px;"></div>
<div class="style_1" style="margin: 0px 20px 0 0px; width: 175px;"></div>
<br />
<marquee onmouseout="this.start();" onmouseover="this.stop();" scrollamount="2">
<a href="lien"><img class="img_80" src="url" /></a> <a href="lien"><img style="margin-left: 10px;" class="img_80" src="url" /></a><a href="lien"><img style="margin-left: 10px;" class="img_80" src="url" /></a><a href="lien"><img style="margin-left: 10px;" class="img_80" src="url" /></a><a href="lien"><img style="margin-left: 10px;" class="img_80" src="url" /></a>
</marquee><a href="lien vers le sujet" class="bloc_more">more</a>
</div>
</td></tr></tbody></table>
<div style="border-bottom : 2px solid #DFDFDF;" class="fond_5">
<table>
<tbody>
<tr>
<td>
<div style="margin: 0 0 -28px 40px;" class="titre_1">
Top-sites
</div><br />
<div style="margin: 0 5px 0 0; width: 380px;" class="fond_2">
<br />
<div class="style_2" style="margin: -3px 20px 0 20px;"></div>
<div class="style_1" style="margin: 0px 20px 0 20px; width: 340px;"></div><br />
<div style="text-align: center;">
<a href="lien"><img style="margin-left: 20px;" class="img_ts" src="url" /></a><a href="lien"><img class="img_ts" src="url" /></a><a href="lien"><img style="margin-right: 20px;" class="img_ts" src="url" /></a>
</div>
</div>
</td>
<td style="margin-left: 30px;">
<div style="margin: 0 0 -28px 50px;" class="titre_1">
Partenaires
</div><br />
<div style="width: 350px; text-align: center; margin-right: 20px;" class="fond_2">
<br />
<div class="style_2" style="margin: -3px 20px 0 20px;"></div>
<div class="style_1" style="margin: 0px 20px 0 20px; width: 310px;"></div>
<br />
<div style="text-align: center;">
<a href="lien"><img style="margin-left: 10px;" class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a><a href="lien"><img class="img_40" src="url" /></a>
</div>
</div>
</td>
</tr>
</tbody>
</table><a href="http://www.never-utopia.com" style="margin-left: 660px;" class="bloc_credit">
Never-Utopia</a>
<div style="margin-left: 665px; font-size: 10px; font-family: arial narrow; color: #BEBEBE;">
Kanae
</div>
</div>
</div>
Code CSS à insérer dans la feuille CSS de votre forum :
Rappel :Si vous avez déjà installé dans le CSS de votre forum les éléments proposés dans la fiche de présentation ou dans la fiche de lien, certains éléments sont susceptibles de se répéter ! Veillez donc bien à repérer uniquement les éléments que vous n'avez pas déjà installés afin de vous épargner du temps et de garder une fiche de CSS claire et lisible.
De plus, j'y ai également inséré le code permettant de changer la couleur des liens URL et leur animation. Cette modification sera valable pour l'ensemble de votre forum alors soyez vigilants si vous ne souhaitez pas l'installer.
De plus, j'y ai également inséré le code permettant de changer la couleur des liens URL et leur animation. Cette modification sera valable pour l'ensemble de votre forum alors soyez vigilants si vous ne souhaitez pas l'installer.
- Code:
/*********LIENS URL**************/
a
{
text-decoration: none !important;
}
a:hover
{
text-decoration: none !important;
color: #60425A !important;
}
a:link
{
text-decoration: none !important;
}
/***** PAGE DACCUEIL *****/
.fond_2
{
background-color: #DFDFDF;
margin-left: 10px;
padding-bottom: 20px;
margin-right: 10px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.fond_3
{
background-color: #F0F0F0;
border: 2px solid #BEBEBE;
width: 196px;
height: 152px;
margin-left : 28px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 10px;
overflow: auto;
}
.titre_1
{
margin: 0 0 -24px 80px;
font-family: georgia;
font-size: 24px;
color: #B0C3AB;
}
.style_1
{
background-color: #B0C3AB;
width: 100%;
height: 2px;
}
.style_2
{
background-color: #8D838D;
height: 1px;
margin-left: 30px;
margin-right: 30px;
margin-top: -7px;
}
.fond_entete
{
background-color: #F0F0F0;
border-top: 4px solid #B0C3AB;
border-bottom: 2px solid #BEBEBE;
height: 40px;
width: 100%;
}
.bloc_guillemet
{
text-align: right;
margin-right: 10px;
margin-top: -24px;
font-family: georgia;
font-size: 36px;
text-shadow: 1px 1px 2px #1A1A1A;
color: #353535;
}
.fond_5
{
background-color: #E4E4E4;
width: 760px;
margin: auto;
}
.fond_6
{
background-color: #F0F0F0;
border: 2px solid #BEBEBE;
width: 171px;
height: 135px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
text-align: center;
margin: 0 20px 0 20px;
padding: 10px;
overflow: auto;
}
.bloc_lien
{
font-size: 12px;
font-family: georgia;
color: #879E9B !important;
font-variant: small-caps;
font-weight: bold;
}
.bloc_more
{
text-align: right;
float: right;
margin: -3px 20px 0 0;
font-family: georgia;
font-variant: small-caps;
font-size: 14px;
font-style: italic;
letter-spacing : 2px; color: #879E9B;
}
.img_80
{
position: relative;
width: 80px;
height: 80px;
opacity: 1;
transition: 1s all;
z-index: 2;
}
.staff
{
display:inline-block;
position: relative;
height: 80px;
width: 80px;
margin-left: 10px;
overflow: hidden;
}
.bulle_staff
{
position: absolute;
top: 0; left: 0;
height: 80px;
width: 80px;
overflow: hiden;
}
.staff:hover .img_80
{
opacity: 0;
}
.img_ts
{
width: 100px;
height: 40px;
margin-right: 10px;
}
.img_40
{
width: 40px;
height: 40px;
margin-right: 10px;
}
.date
{
font-size: 16px;
font-style: italic;
font-family: arial narrow;
color: #95879E;
}
.objet
{
font-size: 12px;
font-family: georgia;
color: #879E9B;
font-variant: small-caps;
font-weight: bold;
}
.fond_3.news
{
position: relative;
overflow: hidden;
padding: 10px;
}
.news_img
{
background: url(http://nsa33.casimages.com/img/2014/11/24/141124022024156156.png) no-repeat center;
width: 196px;
height: 102px;
position: absolute;
top: 0; left: 0;
transition: 1s all;
z-index: 2;
}
.fond_3.news:hover .news_img
{
left: 196px;
}
.news_bloc
{
height: 100px;
overflow: auto;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.bloc_credit
{
margin: -3px 0 0 10px;
color: #BEBEBE;
font-size: 10px;
font-family: arial narrow;
}
/***** FIN PAGE DACCUEIL *****/
Si vous avez des problèmes avec ce LS, venez poster ici.
Dernière édition par Kanae le Ven 23 Déc 2016 - 9:07, édité 4 fois
